<template>
  <div class="dashboard-editor-container">
<!--    <panel-group @handleSetLineChartData="handleSetLineChartData" :day="day" />-->

<!--    <el-row style="margin-bottom: 10px">-->
<!--      <el-button @click="changeLimit(7)" type="primary">过去1周</el-button>-->
<!--      <el-button @click="changeLimit(30)" type="warning">过去30天</el-button>-->
<!--      <el-button @click="changeLimit(100)" type="success">过去100天</el-button>-->
<!--    </el-row>-->

<!--    &lt;!&ndash;  例子  &ndash;&gt;-->
<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;" v-if="false">-->
<!--      <line-chart :chart-data="lineChartData" :name="name" />-->
<!--    </el-row>-->

<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;" v-if="month.order.length >= 0">-->
<!--      <line-chart :chart-data="month.order" :name="'订单'" />-->
<!--    </el-row>-->

<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;" v-if="month.member.length >= 0">-->
<!--      <line-chart :chart-data="month.member" :name="'会员'" :color="'red'" />-->
<!--    </el-row>-->

<!--    <el-row :gutter="32" v-if="false">-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <raddar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <pie-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <bar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

<!--    <el-row :gutter="8" v-if="false">-->
<!--      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">-->
<!--        <transaction-table />-->
<!--      </el-col>-->
<!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
<!--        <todo-list />-->
<!--      </el-col>-->
<!--      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">-->
<!--        <box-card />-->
<!--      </el-col>-->
<!--    </el-row>-->
    <h1>欢迎使用分公司管理系统</h1>
    <h2 v-if="!hasPassword" @click="goPassword">请修改登录密码, <span>点击修改</span></h2>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'

import api from '@/api'

const lineChartData = {
  product: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [5000, 82, 91, 154, 8000, 140, 145]
  },
  member: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  finance: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  order: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.product,
      name: '商品',
      day: {},
      month: {
        order: [],
        member: []
      },
      // 限制天数
      limit: 7,
      hasPassword: true
    }
  },
  methods: {
    // click type
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
      const list = {
        product: '商品',
        member: '会员',
        finance: '流水',
        order: '订单'
      }
      this.name = list[type]
    },
    getDay() {
      api.data.day().then(response => {
        const { data } = response
        this.day = data
      })
    },
    getMonth() {
      api.data.month({ count: this.limit }).then(response => {
        const { data } = response
        this.month.order = data.order
        this.month.member = data.member
      })
    },
    changeLimit(n) {
      this.limit = n
      this.getMonth()
    },
    goPassword() {
      this.$router.push('/admin/password')
    },
    fetchPassword() {
      api.data.viewPassword().then(response => {
        const { data } = response
        this.hasPassword = data.has
      })
    }
  },
  created() {
    // this.getDay()
    // this.getMonth()
    this.fetchPassword()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

h2 {
  color: red;
  span {
    color: blue;
    cursor: pointer;
  }
}
</style>
